<template>
	<view class="goodlistpage">
		<view class="searchbox">
			<view class="putbox">
				<view class="iconfont icon-sousuo"></view>
				<input type="text" placeholder="请输入名称" />
				<view class="searchbtn">
					搜索
				</view>
			</view>
			<view class="shaixuan">
				筛选
			</view>
			
		</view>
		<view class="listbox">
			<view class="itemlist">
				<view class="imgbox">
					<image src="https://changban.dianjingkeji.net/img/fd456a1456416.jpg" mode=""></image>
				</view>
				<view class="info">
					<view class="name">
						超级抗原蛋白饮品增强免疫力
					</view>
					<view class="priceline">
						<view class="price">
							￥1060
						</view>
						<view class="addbox">
							+
							<view class="yuan">
								2
							</view>
						</view>
					</view>
					<view class="labelline">
						<span class="itemlabel">
							免费配送
						</span>
						<span class="itemlabel">
							专家组线上指导
						</span>
						
					</view>
					<view class="shop">
						观脉堂店
					</view>
				</view>
			</view>
		</view>
		<view class="shopingcarbox">
			<view class="iconfont icon-gouwuche">
				
			</view>
			<view class="yuan">
				2
			</view>
		</view>
		<view class="footprint">
			<view class="iconfont icon-_jiaoyin">
				
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="less" scoped>
  .goodlistpage{
	  width: 750rpx;
	  box-sizing: border-box;
	  padding: 20rpx;
	 background: linear-gradient(180deg, rgba(242,248,255,1) 0%,rgba(255,255,255,0) 76%);
	  .searchbox{
		  width: 100%;
		  height: 60rpx;
		  display: flex;
		  align-items: center;
		  justify-content: space-between;
		
		  .putbox{
			  width: 80%;
			  margin-left: 60rpx;
			  height: 60rpx;
			  line-height: 60rpx;
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  border-radius: 30rpx;
			  background-color: white;
			  box-sizing: border-box;
			  padding-left: 10rpx;
			  input{
				  height: 60rpx;
			  }
			  .searchbtn{
				  width: 90rpx;
				  height: 60rpx;
				  border-radius: 30rpx;
				  text-align: center;
				  font-size:28rpx;
				  font-weight: bold;
				  line-height: 60rpx;
				  box-shadow: 0 0 4rpx 4rpx gray;
				  
			  }
		  }
		  .shaixuan{
			  font-size: 30rpx;
			  font-weight: bold;
		  }
	  }
	  .listbox{
		  width: 100%;
		  box-sizing: border-box;
		  padding: 10rpx;
		  .itemlist{
			  width: 100%;
			  display: flex;
			  align-items: center;
			  justify-content: space-between;
			  margin-top: 30rpx;
			  .imgbox{
				  width: 280rpx;
				  height: 300rpx;
				  image{
					  width: 100%;
					  height: 100%;
					  border-radius: 20rpx;
				  }
			  }
			  .info{
				  flex: 1;
				  margin-left: 20rpx;
				  line-height: 2;
				  .name{
					  font-weight: bold;
					  line-height: 1.5;
				  }
				  .priceline{
					  width: 100%;
					  display: flex;
					  align-items: center;
					  justify-content: space-between;
					  .price{
						  color: #FF1F00 ;
						  font-weight: bold;
					  }
					  .addbox{
						  width: 60rpx;
						  height: 60rpx;
						  border-radius: 50%;
						  line-height: 60rpx;
						  text-align: center;
						  box-sizing: border-box;
						  position: relative;
						   color: #FF1F00 ;
						  background-color: #FFEDEA;
					      font-weight: bold;
						  font-size: 44rpx;
						  .yuan{
							  width: 30rpx;
							  height: 30rpx;
							  border-radius: 50%;
							  border: 1rpx solid #FF1F00;
							  line-height: 30rpx;
							  text-align: center;
							  font-size: 24rpx;
							  position: absolute;
							  top: -20rpx;
							  right: -15rpx;
							  color:  #FF1F00;
							  
						  }
						  
					  }
				  }
				  .labelline{
					  font-size: 24rpx;
					  color: #AA7A00;
					  .itemlabel{
						  background-color: #FFF4D8;
						  margin: 10rpx 20rpx;
						  border-radius: 10rpx;
					  }
					  
				  }
				  .shop{
					  color: #9A9A9A ;
					  font-size: 26rpx;
					  
				  }
			  }
		  }
	  }
	  .shopingcarbox{
		  width: 80rpx;
		  height: 80rpx;
		  border: 1rpx solid gray;
		  line-height: 80rpx;
		  border-radius: 50%;
		  text-align: center;
		  position: fixed;
		  right: 80rpx;
		  bottom: 40vh;
		  .iconfont{
			  font-size: 50rpx;
			  font-weight: bold;
		  }
		  .yuan{
			  width: 30rpx;
			  height: 30rpx;
			  border-radius: 50%;
			  border: 1rpx solid #FF1F00;
			  line-height: 30rpx;
			  text-align: center;
			  font-size: 24rpx;
			  position: absolute;
			  top: -20rpx;
			  right: -15rpx;
			   color:  #FF1F00;
		  }
	  }
	  .footprint{
		 width: 80rpx;
		 height: 80rpx;
		 border: 1rpx solid gray;
		 line-height: 80rpx;
		 border-radius: 50%;
		 text-align: center;
		 position: fixed;
		 right: 80rpx;
		 bottom: 32vh;
		 .iconfont{
		 			  font-size: 50rpx;
		 			  font-weight: bold;
		 } 
	  }
  }
</style>
